<template>
    <view class="add_car">
        <up-form :model="form" label-width="100px" ref="formRef" :rules="rules">
            <view class="form_part">
                <ssection title="请上传行驶证(必填)"></ssection>
                <view class="file_box">
                    <view>
                        <view class="image_part">
                            <image :src="image.permitPic" @click="uploadImage('permitPic', 1, 2)"></image>
                        </view>
                        <view class="file_title">行驶证正页</view>
                    </view>
                    <view>
                        <view class="image_part">
                            <image :src="image.permitBackPic" @click="uploadImage('permitBackPic', 0, 2)">
                            </image>
                        </view>
                        <view class="file_title">行驶证副页</view>
                    </view>
                </view>

                <ssection title="请确定行驶证信息"></ssection>
                <view style="padding: 0 10px;">
                    <up-form-item label="车牌号" prop="licensePlateNumber" borderBottom>
                        <up-input v-model="form.licensePlateNumber" border="none" placeholder="请输入车牌号"></up-input>
                    </up-form-item>
                    <up-form-item label="车辆类型" borderBottom @click="openOrCancelPicker('carType')" prop="carType">
                        <up-input v-model="showText.carType" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.carType" :columns="[cartypeList]"
                            @confirm="(e) => pickerChange(e, 'carType')" keyName="name"
                            @cancel="openOrCancelPicker('carType')"></up-picker>
                    </up-form-item>

                    <up-form-item label="车辆颜色" borderBottom @click="openOrCancelPicker('carColor')" prop="carColor">
                        <up-input v-model="showText.carColor" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.carColor" :columns="[carColorList]"
                            @confirm="(e) => pickerChange(e, 'carColor')" keyName="name"
                            @cancel="openOrCancelPicker('carColor')"></up-picker>
                    </up-form-item>

                    <up-form-item label="车辆能源" borderBottom @click="openOrCancelPicker('carEnergyType')"
                        prop="carEnergyType">
                        <up-input v-model="showText.carEnergyType" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.carEnergyType" :columns="[carEnergyList]"
                            @confirm="(e) => pickerChange(e, 'carEnergyType')" keyName="name"
                            @cancel="openOrCancelPicker('carEnergyType')"></up-picker>
                    </up-form-item>

                    <up-form-item label="使用性质" prop="natureUsage" borderBottom
                        @click="openOrCancelPicker('natureUsage')">
                        <up-input v-model="showText.natureUsage" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.natureUsage" :columns="[natureUsage]"
                            @confirm="(e) => pickerChange(e, 'natureUsage')" keyName="name"
                            @cancel="openOrCancelPicker('natureUsage')"></up-picker>
                    </up-form-item>

                    <up-form-item label="车辆性质" prop="vehicleNature" borderBottom
                        @click="openOrCancelPicker('vehicleNature')">
                        <up-input v-model="showText.vehicleNature" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.vehicleNature" :columns="[vehicleNature]" keyName="name"
                            @confirm="(e) => pickerChange(e, 'vehicleNature')"
                            @cancel="openOrCancelPicker('vehicleNature')"></up-picker>
                    </up-form-item>
                    <up-form-item label="车牌颜色" prop="plateColour" borderBottom
                        @click="openOrCancelPicker('plateColour')">
                        <up-input v-model="showText.plateColour" disabled border="none" placeholder="请选择"
                            disabledColor="transparent">
                            <template v-slot:suffix>
                                <up-icon name="arrow-right"></up-icon>
                            </template>
                        </up-input>
                        <up-picker :show="selectObj.plateColour" :columns="[plateColour]" keyName="name"
                            @confirm="(e) => pickerChange(e, 'plateColour')"
                            @cancel="openOrCancelPicker('plateColour')"></up-picker>
                    </up-form-item>


                    <up-form-item label="车长" prop="carLegth" borderBottom>
                        <up-input type="number" v-model="form.carLegth" border="none"
                            placeholder="请输入车长(单位为mm)"></up-input>
                    </up-form-item>
                    <up-form-item label="车宽" prop="width" borderBottom>
                        <up-input type="number" v-model="form.width" border="none"
                            placeholder="请输入车宽(单位为mm)"></up-input>
                    </up-form-item>
                    <up-form-item label="车高" prop="carHigh" borderBottom>
                        <up-input type="number" v-model="form.carHigh" border="none"
                            placeholder="请输入车高(单位为mm)"></up-input>
                    </up-form-item>
                    <up-form-item label="吨位" prop="carWeight" borderBottom>
                        <up-input type="number" v-model="form.carWeight" border="none"
                            placeholder="请输入吨位(单位为kg)"></up-input>
                    </up-form-item>
                    <up-form-item label="总质量" prop="tonnage" borderBottom>
                        <up-input type="number" v-model="form.tonnage" border="none" placeholder="请输入车总质量"></up-input>
                    </up-form-item>
                    <up-form-item label="整备质量" prop="curbWeight" borderBottom>
                        <up-input type="number" v-model="form.curbWeight" border="none"
                            placeholder="请输入整备质量(单位为kg)"></up-input>
                    </up-form-item>
                    <up-form-item label="核定载质量" prop="loadCapacity" borderBottom>
                        <up-input type="number" v-model="form.loadCapacity" border="none"
                            placeholder="请输入核定载质量(单位为kg)"></up-input>
                    </up-form-item>
                    <up-form-item label="发证机关" prop="authority" borderBottom>
                        <up-input v-model="form.authority" border="none" placeholder="请输入发证机关"></up-input>
                    </up-form-item>
                    <up-form-item label="车辆识别代码" prop="identificationCode" borderBottom>
                        <up-input v-model="form.identificationCode" border="none" placeholder="请输入车辆识别代码"></up-input>
                    </up-form-item>
                    <up-form-item label="所有人" prop="owner" borderBottom>
                        <up-input v-model="form.owner" border="none" placeholder="请输入所有人"></up-input>
                    </up-form-item>

                    <up-form-item label="注册日期" prop="registrationDate" borderBottom
                        @click="showOrClose(1, 'registrationDate')">
                        <up-input v-model="form.registrationDate" border="none" placeholder="请输入注册日期" disabled
                            disabledColor="#fff"></up-input>
                    </up-form-item>
                    <up-form-item label="发证日期" prop="dateIssue" borderBottom @click="showOrClose(1, 'dateIssue')">
                        <up-input v-model="form.dateIssue" border="none" placeholder="请输入发证日期" disabled
                            disabledColor="#fff"></up-input>
                    </up-form-item>
                    <up-form-item label="强制报废日期" prop="manualScrapTime" borderBottom
                        @click="showOrClose(1, 'manualScrapTime')">
                        <up-input v-model="form.manualScrapTime" border="none" placeholder="请输入强制报废日期" disabled
                            disabledColor="#fff"></up-input>
                    </up-form-item>
                </view>
            </view>
            <view class="form_part">
                <ssection title="请上传道路运输证(必填)" stitle=""></ssection>
                <view class="file_box">
                    <view>
                        <view class="image_part">
                            <image :src="image.roadTransCertPic" @click="uploadImage('roadTransCertPic', 1, 7)">
                            </image>
                        </view>
                        <view class="file_title">道路运输证正页</view>
                    </view>
                    <view></view>
                </view>
                <up-form-item label="道路运输证号" borderBottom prop="roadTranCertificateNumber">
                    <up-input v-model="form.roadTranCertificateNumber" border="none" placeholder="请输入道路运输证号">
                        <template v-slot:suffix>
                            <up-icon name="question-circle" @click="wenhao"></up-icon>
                        </template>
                    </up-input>
                </up-form-item>
                <up-form-item label="开始日期" prop="roadTransCertStartTime" borderBottom
                    @click="showOrClose(1, 'roadTransCertStartTime')">
                    <up-input v-model="form.roadTransCertStartTime" border="none" placeholder="请输入运输证开始日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>
                <up-form-item label="结束日期" prop="roadTransCertEndTime" borderBottom
                    @click="showOrClose(1, 'roadTransCertEndTime')">
                    <up-input v-model="form.roadTransCertEndTime" border="none" placeholder="请输入发证运输证结束日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>

                <ssection title="请上传交强险保险单(必填)"></ssection>
                <view class="file_box" style="padding: 10px 0 25px;">
                    <view>
                        <view class="image_part" style="aspect-ratio: 9/5;">
                            <image :src="image.safePic" @click="uploadImage('safePic', 1, 6)"></image>
                        </view>
                    </view>
                    <view></view>
                </view>
                <up-form-item label="交强险车架号" prop="bdFrameNumber" borderBottom>
                    <up-input v-model="form.bdFrameNumber" border="none" placeholder="请输入交强险车架号"></up-input>
                </up-form-item>
                <up-form-item label="使用性质" prop="bdNature" borderBottom>
                    <up-input v-model="form.bdNature" border="none" placeholder="请输入交强险使用性质"></up-input>
                </up-form-item>
                <up-form-item label="保险开始日期" prop="bdStartDate" borderBottom @click="showOrClose(1, 'bdStartDate')">
                    <up-input v-model="form.bdStartDate" border="none" placeholder="请输入保险开始日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>
                <up-form-item label="保险结束日期" prop="bdEndDate" borderBottom @click="showOrClose(1, 'bdEndDate')">
                    <up-input v-model="form.bdEndDate" border="none" placeholder="请输入保险结束日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>

                <ssection title="请上传挂车行驶证(选填)"></ssection>
                <view class="file_box">
                    <view>
                        <view class="image_part">
                            <image :src="trailerImage.trailerPermitPic" @click="uploadImage('trailerPermitPic', 1, 2)">
                            </image>
                        </view>
                        <view class="file_title">行驶证正页</view>
                    </view>
                    <view>
                        <view class="image_part">
                            <image :src="trailerImage.trailerPermitBackPic"
                                @click="uploadImage('trailerPermitBackPic', 0, 2)">
                            </image>
                        </view>
                        <view class="file_title">行驶证副页</view>
                    </view>
                </view>
                <up-form-item label="挂车车牌号" prop="trailerLicensePlateNumber" borderBottom>
                    <up-input v-model="form.trailerLicensePlateNumber" border="none" placeholder="请输入挂车车牌号"></up-input>
                </up-form-item>
                <up-form-item label="挂车所有人" prop="trailerOwner" borderBottom>
                    <up-input v-model="form.trailerOwner" border="none" placeholder="请输入挂车所有人"></up-input>
                </up-form-item>
                <up-form-item label="使用性质" prop="trailerNatureUsage" borderBottom
                    @click="openOrCancelPicker('trailerNatureUsage')">
                    <up-input v-model="showText.trailerNatureUsage" disabled border="none" placeholder="请选择"
                        disabledColor="transparent">
                        <template v-slot:suffix>
                            <up-icon name="arrow-right"></up-icon>
                        </template>
                    </up-input>
                    <up-picker :show="selectObj.trailerNatureUsage" :columns="[natureUsage]"
                        @confirm="(e) => pickerChange(e, 'trailerNatureUsage')" keyName="name"
                        @cancel="openOrCancelPicker('trailerNatureUsage')"></up-picker>
                </up-form-item>
                <up-form-item label="挂车颜色" borderBottom @click="openOrCancelPicker('trailerCarColor')"
                    prop="trailerCarColor">
                    <up-input v-model="showText.trailerCarColor" disabled border="none" placeholder="请选择"
                        disabledColor="transparent">
                        <template v-slot:suffix>
                            <up-icon name="arrow-right"></up-icon>
                        </template>
                    </up-input>
                    <up-picker :show="selectObj.trailerCarColor" :columns="[carColorList]"
                        @confirm="(e) => pickerChange(e, 'trailerCarColor')" keyName="name"
                        @cancel="openOrCancelPicker('trailerCarColor')"></up-picker>
                </up-form-item>
                <up-form-item label="车牌颜色" prop="trailerPlateColour" borderBottom
                    @click="openOrCancelPicker('trailerPlateColour')">
                    <up-input v-model="showText.trailerPlateColour" disabled border="none" placeholder="请选择"
                        disabledColor="transparent">
                        <template v-slot:suffix>
                            <up-icon name="arrow-right"></up-icon>
                        </template>
                    </up-input>
                    <up-picker :show="selectObj.trailerPlateColour" :columns="[plateColour]" keyName="name"
                        @confirm="(e) => pickerChange(e, 'trailerPlateColour')"
                        @cancel="openOrCancelPicker('trailerPlateColour')"></up-picker>
                </up-form-item>
                <up-form-item label="挂车车长" prop="trailerCarLegth" borderBottom>
                    <up-input type="number" v-model="form.trailerCarLegth" border="none"
                        placeholder="请输入车长(单位为mm)"></up-input>
                </up-form-item>
                <up-form-item label="挂车车宽" prop="trailerWidth" borderBottom>
                    <up-input type="number" v-model="form.trailerWidth" border="none"
                        placeholder="请输入车宽(单位为mm)"></up-input>
                </up-form-item>
                <up-form-item label="挂车车高" prop="trailerCarHigh" borderBottom>
                    <up-input type="number" v-model="form.trailerCarHigh" border="none"
                        placeholder="请输入车高(单位为mm)"></up-input>
                </up-form-item>
                <up-form-item label="挂车吨位" prop="trailerCarWeight" borderBottom>
                    <up-input type="number" v-model="form.trailerCarWeight" border="none"
                        placeholder="请输入吨位(单位为kg)"></up-input>
                </up-form-item>
                <up-form-item label="发证机关" prop="trailerAuthority" borderBottom>
                    <up-input v-model="form.trailerAuthority" border="none" placeholder="请输入发证机关"></up-input>
                </up-form-item>
                <up-form-item label="注册日期" prop="trailerRegistrationDate" borderBottom
                    @click="showOrClose(1, 'trailerRegistrationDate')">
                    <up-input v-model="form.trailerRegistrationDate" border="none" placeholder="请输入注册日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>
                <up-form-item label="发证日期" prop="trailerDateIssue" borderBottom
                    @click="showOrClose(1, 'trailerDateIssue')">
                    <up-input v-model="form.trailerDateIssue" border="none" placeholder="请输入发证日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>
                <up-form-item label="强制报废日期" prop="trailerManualScrapTime" borderBottom
                    @click="showOrClose(1, 'trailerManualScrapTime')">
                    <up-input v-model="form.trailerManualScrapTime" border="none" placeholder="请输入强制报废日期" disabled
                        disabledColor="#fff"></up-input>
                </up-form-item>


                <view class="submit_btn">
                    <up-button type="primary" color="rgb(0,129,255)" customStyle="borderRadius:5px" @click="addcar"
                        :loading="btnLoading" loadingText="正在提交">添加车辆</up-button>
                </view>
            </view>
        </up-form>
    </view>

    <!-- 提示弹层 -->
    <up-popup mode="center" :mask="true" :show="showPopup" closeable @close="showPopup = false" round="8">
        <view class="tooltip-content">
            <text>总质量 4.5 吨及以下普通货运车辆的</text>
            </br>
            <text>可填'车籍地6 位行政区域代码+000000'</text>
        </view>
    </up-popup>

    <up-datetime-picker v-model="defaultDate" :show="selectDateShow" :minDate="0" :maxDate="32503651199000" mode="date"
        @cancel="showOrClose(0)" @confirm="confirmDate"></up-datetime-picker>

    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import ssection from '@/components/ssection.vue'
import {
    getCarType,
    getCarColor,
    getCarEnergy,
    addCar
} from '@/api/car'
import {
    chooseImage,
    uploadFiles
} from '@/api/file'
import permitPic from '@/static/images/mine/driving_license_front.png'
import permitBackPic from '@/static/images/mine/driving_license_back.jpg'
import roadTransCertPic from '@/static/images/mine/road_transport.png'
import safePic from '@/static/images/mine/insurance_policy.png'
import normalizeDate from "@/utils/dateFormat"



/* 数据 */
const uToastRef = ref<any>(null)
const formRef = ref<UniFormRef | null>(null)
const selectObj = reactive({
    // 车辆类型选择
    carType: false,
    // 车辆颜色选择
    carColor: false,
    // 车辆能源类型选择
    carEnergyType: false,
    // 车辆使用性质选择
    natureUsage: false,
    // 车辆性质选择
    vehicleNature: false,
    // 车牌颜色选择
    plateColour: false,
    // 挂车使用性质选择
    trailerNatureUsage: false,
    // 挂车颜色选择
    trailerCarColor: false,
    // 挂车牌颜色选择
    trailerPlateColour: false
})
const btnLoading = ref(false)
const showPopup = ref(false)// 控制弹层显示
// 表单
const form = reactive({
    licensePlateNumber: "",
    carType: "",
    carColor: "",
    carEnergyType: "",
    natureUsage: "",
    vehicleNature: "",
    plateColour: '',
    roadTranCertificateNumber: "",

    roadTransCertStartTime: "",
    roadTransCertEndTime: "",

    registrationDate: "",
    authority: "",
    identificationCode: "",
    permitPic: "",
    permitBackPic: "",
    roadTransCertPic: "",
    safePic: "",
    carLegth: "",
    width: "",
    carHigh: "",
    carWeight: "",
    tonnage: "",
    loadCapacity: "",
    curbWeight: "",

    bdFrameNumber: "",
    bdNature: "",
    bdStartDate: "",
    bdEndDate: "",


    manualScrapTime: "",
    owner: "",
    dateIssue: "",

    trailerPermitPic: "",
    trailerPermitBackPic: "",
    trailerLicensePlateNumber: "",
    trailerOwner: "",
    trailerNatureUsage: "",
    trailerCarLegth: "",
    trailerWidth: "",
    trailerCarWeight: "",
    trailerCarHigh: "",
    trailerCarColor: "",
    trailerPlateColour: "",
    trailerAuthority: "",
    trailerRegistrationDate: "",
    trailerDateIssue: "",
    trailerManualScrapTime: ""
})
// 显示文本
const showText = reactive({
    carType: "",
    carColor: "蓝色",
    carEnergyType: "汽油",
    natureUsage: "",
    vehicleNature: "",
    plateColour: "",

    trailerNatureUsage: "",
    trailerCarColor: "",
    trailerPlateColour: ""
})
// 车辆类型
const cartypeList = reactive([])
// 车辆颜色
const carColorList = reactive([])
// 车辆能源类型
const carEnergyList = reactive([])
// 车辆使用性质
const natureUsage = reactive([{
    code: 0,
    name: '运营'
}, {
    code: 1,
    name: '非运营'
}, {
    code: 2,
    name: '货运'
}])
// 车辆性质
const vehicleNature = reactive([{
    code: 'OWN',
    name: '自有车辆'
}, {
    code: 'DEP',
    name: '公司车辆'
}])
// 车牌颜色
const plateColour = reactive([{
    code: '1',
    name: '蓝色'
}, {
    code: '2',
    name: '黄色'
}, {
    code: '3',
    name: '黑色'
}, {
    code: '4',
    name: '白色'
}, {
    code: '5',
    name: '绿色'
}, {
    code: '91',
    name: '农黄色'
}, {
    code: '92',
    name: '农绿色'
}, {
    code: '93',
    name: '黄绿色'
}, {
    code: '94',
    name: '渐变绿'
}, {
    code: '9',
    name: '其他'
}])
// const plateColour = reactive([{
//     code: '1',
//     name: '黄底黑字'
// }, {
//     code: '2',
//     name: '绿底黑字'
// }, {
//     code: '3',
//     name: '蓝底黑字'
// }, {
//     code: '4',
//     name: '渐变绿'
// }, {
//     code: '5',
//     name: '黄绿色'
// }])
// 校验规则
const rules = reactive({
    'licensePlateNumber': [{
        required: true,
        message: '车牌号不能为空',
        trigger: ['blur', 'change']
    }],
    'carType': [{
        required: true,
        message: '车辆类型不能为空',
        trigger: ['blur', 'change']
    }],
    'carColor': [{
        required: true,
        message: '车辆颜色不能为空',
        trigger: ['blur', 'change']
    }],
    'carEnergyType': [{
        required: true,
        message: '能源类型不能为空',
        trigger: ['blur', 'change']
    }],
    'carLegth': [{
        required: true,
        message: '车辆长度不能为空',
        trigger: ['blur', 'change']
    }],
    'roadTranCertificateNumber': [{
        required: true,
        message: '道路运输证号不能为空',
        trigger: ['blur', 'change']
    }],
    'width': [{
        required: true,
        message: '车宽不能为空',
        trigger: ['blur', 'change']
    }],
    'carHigh': [{
        required: true,
        message: '车高不能为空',
        trigger: ['blur', 'change']
    }],
    'carWeight': [{
        required: true,
        message: '吨位不能为空',
        trigger: ['blur', 'change']
    }],
    'tonnage': [{
        required: true,
        message: '总质量不能为空',
        trigger: ['blur', 'change']
    }],
    'loadCapacity': [{
        required: true,
        message: '核定载质量不能为空',
        trigger: ['blur', 'change']
    }],
    'curbWeight': [{
        required: true,
        message: '整备质量不能为空',
        trigger: ['blur', 'change']
    }],
    'authority': [{
        required: true,
        message: '发证机关不能为空',
        trigger: ['blur', 'change']
    }],
    'identificationCode': [{
        required: true,
        message: '识别代码不能为空',
        trigger: ['blur', 'change']
    }],
    'owner': [{
        required: true,
        message: '所有人不能为空',
        trigger: ['blur', 'change']
    }],
    'natureUsage': [{
        required: true,
        message: '使用性质不能为空',
        trigger: ['blur', 'change']
    }],
    'vehicleNature': [{
        required: true,
        message: '车辆性质不能为空',
        trigger: ['blur', 'change']
    }],
    'plateColour': [{
        required: true,
        message: '车牌颜色不能为空',
        trigger: ['blur', 'change']
    }],
    'registrationDate': [{
        required: true,
        message: '注册日期不能为空',
        trigger: ['blur', 'change']
    }],
    'dateIssue': [{
        required: true,
        message: '发证日期不能为空',
        trigger: ['blur', 'change']
    }],
    'manualScrapTime': [{
        required: true,
        message: '强制报废日期不能为空',
        trigger: ['blur', 'change']
    }],
    roadTransCertStartTime: [{
        required: true,
        message: '运输证开始日期不能为空',
        trigger: ['blur', 'change']
    }],
    roadTransCertEndTime: [{
        required: true,
        message: '运输证结束日期不能为空',
        trigger: ['blur', 'change']
    }],
    bdFrameNumber: [{
        required: true,
        message: '交强险车架号不能为空',
        trigger: ['blur', 'change']
    }],
    bdNature: [{
        required: true,
        message: '交强险使用性质不能为空',
        trigger: ['blur', 'change']
    }],
    bdStartDate: [{
        required: true,
        message: '交强险开始日期不能为空',
        trigger: ['blur', 'change']
    }],
    bdEndDate: [{
        required: true,
        message: '交强险结束日期不能为空',
        trigger: ['blur', 'change']
    }]
})
const image = reactive({
    permitPic,
    permitBackPic,
    roadTransCertPic,
    safePic
})
const trailerImage = reactive({
    trailerPermitPic: permitPic,
    trailerPermitBackPic: permitBackPic
})
const selectDateShow = ref(false)
// 时间选择默认值
const defaultDate = ref(Date.now())
const dateKey = ref('')




/* 方法 */
const formatDate = (date: string | number) => {
    const d = new Date(date)
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}` // 输出: 2023-05-20
}
// 选择时间
const confirmDate = (e: any) => {
    form[dateKey.value as keyof typeof form] = formatDate(e.value)
    showOrClose(0)
}
// 打开或者关闭时间选择
const showOrClose = (type: number, key?: string) => {
    // type 0 关闭 1 打开
    if (type === 0) {
        selectDateShow.value = false
    } else {
        if (form[key as keyof typeof form]) {
            defaultDate.value = new Date(form[key as keyof typeof form]).getTime()
        } else {
            defaultDate.value = Date.now()
        }
        dateKey.value = key as string
        selectDateShow.value = true
    }
}
// 获取车辆类型，颜色，能源类型封装
const getCarTypeList = async (fn: Function, list: Array<any>, flag: number, fields?: string) => {
    let res = await fn()
    if (res.success) {
        list.push(...res.data)
        if (flag) {
            form[fields as keyof typeof form] = JSON.stringify({
                text: res.data[0].name,
                code: res.data[0].code
            })
        }
    } else {
        uToastRef.value.show({
            position: "top",
            message: res.message,
            type: 'warning'
        })
    }
}
// 开启关闭对应选择框
const openOrCancelPicker = (str: string) => {
    selectObj[str as keyof typeof selectObj] = !selectObj[str as keyof typeof selectObj]
}
// 对应选择框选择
const pickerChange = (e: any, str: string) => {
    if (str === 'carType' || str === 'carColor' || str === 'carEnergyType' || str === 'natureUsage' || str === 'trailerNatureUsage' || str === 'trailerCarColor') {
        showText[str] = e.value[0].name
        form[str] = JSON.stringify({
            text: e.value[0].name,
            code: e.value[0].code
        })
    } else if (str === 'vehicleNature' || str === 'plateColour' || str === 'trailerPlateColour') {
        showText[str] = e.value[0].name
        form[str] = e.value[0].code
    }
    selectObj[str as keyof typeof selectObj] = false
}
// 道路运输证号的问号
const wenhao = () => {
    showPopup.value = true
}
// 上传图片
const uploadImage = async (type: string, cardType: number, licenseType: number) => {
    let params = {
        licenseType,
        cardType
    }
    let img = await chooseImage()
    uToastRef.value.show({
        message: '上传中...',
        type: 'loading',
        duration: -1
    })
    let res: any = await uploadFiles(img, params)
    uToastRef.value.hide()
    if (res.success) {
        let imaData = res.data.certificateInfo
        if (type === 'trailerPermitPic' || type === 'trailerPermitBackPic') {
            trailerImage[type] = img
        } else {
            image[type as keyof typeof image] = img
        }
        form[type as keyof typeof form] = res.data.fileId
        if (type === 'permitPic') {
            let ret = imaData
            // 行驶证正页
            let driver_dic = {
                'owner': 'owner', //所有人
                'Seal': 'authority', //发证机关
                'vin': 'identificationCode', //车辆识别代码
                'useCharacter': 'natureUsage', //使用性质
                'vehicleType': 'carType', //车辆类型
                'issueDate': 'dateIssue', //发证日期
                'registerDate': 'registrationDate' //注册时间
            }
            for (let key in ret) {
                if (Object.keys(driver_dic).includes(key)) {
                    form[driver_dic[key as keyof typeof driver_dic] as keyof typeof form] = ret[key]
                }
            }
            if (ret.useCharacter) {
                let natureUsageValue = ret.useCharacter
                let natureUsageItem = natureUsage.find(item => item.name === natureUsageValue)
                if (natureUsageItem) {
                    let e = {
                        value: [{
                            code: natureUsageItem.code,
                            name: natureUsageItem.name
                        }]
                    }
                    pickerChange(e, 'natureUsage')
                } else {
                    uToastRef.value.show({
                        position: "top",
                        message: '未找到匹配的使用性质项,请自行选择',
                        type: 'warning'
                    })
                }
            }
            if (ret.vehicleType) {
                let carTypeValue = ret.vehicleType
                let natureUsageItems: any = cartypeList.find((item: any) => item.name === carTypeValue)
                if (natureUsageItems) {
                    let e = {
                        value: [{
                            code: natureUsageItems.code, // 假设 code 和 name 相同
                            name: natureUsageItems.name
                        }]
                    }
                    pickerChange(e, 'carType')
                } else {
                    uToastRef.value.show({
                        position: "top",
                        message: '未识别车辆类型,请自行选择',
                        type: 'warning'
                    })
                }
            }
        } else if (type === 'permitBackPic') {
            // 行驶证副页
            let retback = imaData
            let result = []
            if (retback.overallDimension) {
                let overallDimension = retback.overallDimension
                result = overallDimension.replace("mm", "").split("×").map(Number)
                if (Number.isNaN(result[0])) {
                    result = overallDimension.replace("mm", "").split("X").map(Number)
                }
            }
            let driver2_dic = {}
            if (result && result.length === 3) {
                driver2_dic = {
                    'plateNumber': 'licensePlateNumber' //车牌号
                }
                let grossMass: any = ""
                if (retback.grossMass && /\d/.test(retback.grossMass)) {
                    grossMass = parseInt(retback.grossMass.replace('kg', ''))
                } else {
                    grossMass = 0
                }

                let approvedLoad: any = ''
                if (retback.LoadQuality && /\d/.test(retback.LoadQuality)) {
                    approvedLoad = parseInt(retback.LoadQuality.replace('kg', ''))
                } else {
                    approvedLoad = 0
                }

                let unladenMass = parseInt(retback.unladenMass.replace('kg', ''))
                let dataTime = ''
                if (retback.Marks != '') {
                    dataTime = normalizeDate(retback.Marks)
                } else {
                    const date = new Date();
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0')// 月份从0开始，需要+1
                    const day = String(date.getDate()).padStart(2, '0')
                    dataTime = `${year}-${month}-${day}`
                }

                form.carWeight = String(grossMass)
                form.loadCapacity = String(approvedLoad)
                form.curbWeight = String(unladenMass)
                form.carLegth = String(result[0])
                form.width = String(result[1])
                form.carHigh = String(result[2])
                form.manualScrapTime = String(dataTime)
            } else {
                driver2_dic = {
                    'plateNumber': 'licensePlateNumber', //车牌号
                }
                let grossMass: any = ""
                if (retback.grossMass && /\d/.test(retback.grossMass)) {
                    grossMass = parseInt(retback.grossMass.replace('kg', ''))
                } else {
                    grossMass = 0
                }

                let approvedLoad: any = ''
                if (retback.LoadQuality && /\d/.test(retback.LoadQuality)) {
                    approvedLoad = parseInt(retback.LoadQuality.replace('kg', ''))
                } else {
                    approvedLoad = 0
                }
                let unladenMass = parseInt(retback.unladenMass.replace('kg', ''))
                form.curbWeight = String(unladenMass)
                form.manualScrapTime = normalizeDate(retback.Marks)
                form.carWeight = String(grossMass)
                form.loadCapacity = String(approvedLoad)
            }
            for (let key in retback) {
                if (Object.keys(driver2_dic).includes(key)) {
                    form[driver2_dic[key as keyof typeof driver2_dic] as keyof typeof form] = retback[key]
                }
            }
        } else if (type === "roadTransCertPic") {
            form.roadTranCertificateNumber = imaData.roadTranCertificateNumber
            form.roadTransCertStartTime = normalizeDate(imaData.roadTransCertStartTime)
            form.roadTransCertEndTime = normalizeDate(imaData.roadTransCertEndTime)
        } else if (type === "safePic") {
            form.bdFrameNumber = imaData.bdFrameNumber
            form.bdNature = imaData.bdNature
            form.bdStartDate = normalizeDate(imaData.bdStartDate)
            form.bdEndDate = normalizeDate(imaData.bdEndDate)
        } else if (type === "trailerPermitPic") {
            let ret = imaData
            if (ret.plateNumber) {
                form.trailerLicensePlateNumber = ret.plateNumber
            }
            let driver_dic = {
                'owner': 'trailerOwner', //所有人
                'issueDate': 'trailerDateIssue', //发证日期
                'registerDate': 'trailerRegistrationDate' //注册时间
            }
            for (let key in ret) {
                if (Object.keys(driver_dic).includes(key)) {
                    form[driver_dic[key as keyof typeof driver_dic] as keyof typeof form] = ret[key]
                }
            }
            if (ret.useCharacter) {
                let natureUsageValue = ret.useCharacter
                let natureUsageItem = natureUsage.find(item => item.name === natureUsageValue)
                if (natureUsageItem) {
                    let e = {
                        value: [{
                            code: natureUsageItem.code,
                            name: natureUsageItem.name
                        }]
                    }
                    pickerChange(e, 'trailerNatureUsage')
                } else {
                    uToastRef.value.show({
                        position: "top",
                        message: '未找到匹配的使用性质项,请自行选择',
                        type: 'warning'
                    })
                }
            }
        } else if (type === "trailerPermitBackPic") {
            let retback = imaData
            let result = []
            if (retback.overallDimension) {
                let overallDimension = retback.overallDimension
                result = overallDimension.replace("mm", "").split("×").map(Number)
                if (Number.isNaN(result[0])) {
                    result = overallDimension.replace("mm", "").split("X").map(Number)
                }
            }
            let driver2_dic = {}
            if (result && result.length === 3) {
                driver2_dic = {
                    'plateNumber': 'trailerLicensePlateNumber' //车牌号
                }
                let grossMass: any = ""
                if (retback.grossMass && /\d/.test(retback.grossMass)) {
                    grossMass = parseInt(retback.grossMass.replace('kg', ''))
                } else {
                    grossMass = 0
                }

                let dataTime = ''
                if (retback.Marks != '') {
                    dataTime = normalizeDate(retback.Marks)
                } else {
                    const date = new Date();
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0')// 月份从0开始，需要+1
                    const day = String(date.getDate()).padStart(2, '0')
                    dataTime = `${year}-${month}-${day}`
                }

                form.trailerCarWeight = String(grossMass)
                form.trailerCarLegth = String(result[0])
                form.trailerWidth = String(result[1])
                form.trailerCarHigh = String(result[2])
                form.trailerManualScrapTime = String(dataTime)
            } else {
                driver2_dic = {
                    'plateNumber': 'trailerLicensePlateNumber', //车牌号
                }
                let grossMass: any = ""
                if (retback.grossMass && /\d/.test(retback.grossMass)) {
                    grossMass = parseInt(retback.grossMass.replace('kg', ''))
                } else {
                    grossMass = 0
                }
                form.trailerCarWeight = String(grossMass)
            }
            for (let key in retback) {
                if (Object.keys(driver2_dic).includes(key)) {
                    form[driver2_dic[key as keyof typeof driver2_dic] as keyof typeof form] = retback[key]
                }
            }
        }
    }
}
const checkImage = () => {
    let images = Object.keys(image)
    for (let key of images) {
        if (!form[key as keyof typeof form]) {
            uToastRef.value.show({
                position: "top",
                message: '请先上传所有图片',
                type: 'warning'
            })
            return false
        }
    }
    return true
}
// 确认添加车辆
const addcar = async () => {
    let valid = false
    try {
        valid = await formRef.value?.validate()
    } catch {
        uToastRef.value.show({
            position: "top",
            message: '请先完善信息',
            type: 'warning'
        })
    }
    if (valid && checkImage()) {
        btnLoading.value = true
        uToastRef.value.show({
            message: '正在添加车辆',
            type: 'loading',
            duration: -1
        })
        let res = await addCar(form)
        uToastRef.value.hide()
        btnLoading.value = false
        if (res.success) {
            uToastRef.value.show({
                position: "top",
                message: '已成功添加车辆',
                type: 'success',
                complete() {
                    uni.navigateBack()
                }
            })
        }
    }
}
// 初始化封装
const init = async () => {
    uToastRef.value.show({
        message: '加载中...',
        type: 'loading',
        duration: -1
    })
    await getCarTypeList(getCarType, cartypeList, 0)
    await getCarTypeList(getCarColor, carColorList, 1, 'carColor')
    await getCarTypeList(getCarEnergy, carEnergyList, 1, 'carEnergyType')
    uToastRef.value.hide()
}


/* 钩子 */
onMounted(async () => {
    await init()
})

</script>

<style lang="scss" scoped>
.add_car {
    .form_part {
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .file_box {
            display: flex;
            // padding: 0 10px 10px;
            padding-bottom: 10px;
            borderBottom: 1px solid rgb(214, 215, 217);
            margin: 0 10px 10px;

            >view {
                flex: 1;
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }

                .image_part {
                    width: 100%;
                    aspect-ratio: 3 / 2;
                    border: 1px solid #ddd;
                    box-sizing: border-box;

                    >image {
                        width: inherit;
                        height: 100%;
                        display: block;
                    }
                }

                .file_title {
                    padding: 15px 0 5px;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }

        .low_tip {
            color: rgb(64, 117, 247);
        }

        .submit_btn {
            padding: 5px 10px 10px;
        }
    }
}

/* 弹层内容样式 */
.tooltip-content {
    padding: 30px 20px;
    background-color: #ffffff;
    border-radius: 8px;
    max-width: 300px;
    text-align: center;
    font-size: 14px;
    color: #333;
}
</style>
